前幾天提到一些關於網頁優化的內容，這幾天回到CSS上，CSS預處理器是什麼？CSS預處理器就是一種可以讓開發者用另一種語法規則來寫CSS，再編譯成CSS檔案讓瀏覽器讀取。
CSS預處理器支持變數、巢狀、繼承、函數等等功能，讓我們可以寫出類似程式的邏輯或是做運算，也增加CSS的可讀性。

那具體來說預處理器可以做到什麼？舉個例子，假設我在深色模式設定了一些樣式。

.dark{
  background-image: url(../kelaugh555/img/sleep-d.webp);
  .menu{
    background-color:#e2e2e2bd;
  }
  .menu:hover{
    background-color:#e2e2e2e6;
  }
  .introduce{
    background: linear-gradient(to top,rgb(52 47 40 / 67%) 0,rgb(91 83 78 / 16%) 100%);
  }
  .member,.about-sub{
    color: white;
    background-color: #bfbbb7b8;
  }
}

如果不使用巢狀寫法，就會像下面這樣，每個物件的深色模式都需要單獨設定，在維護上很不方便。

.dark {
  background-image: url(../kelaugh555/img/sleep-d.webp);
}
.dark .menu {
  background-color: #e2e2e2bd;
}
.dark .menu:hover {
  background-color: #e2e2e2e6;
}
.dark .introduce {
  background: linear-gradient(to top, rgb(52 47 40 / 67%) 0, rgb(91 83 78 / 16%) 100%);
}
.dark .member, .dark .about-sub {
  color: white;
  background-color: #bfbbb7b8;
}

現在也有許多成熟的預處理器給使用者作選擇，像是Sass、LESS、Stylus等等，在大型專案中，使用預處理器可以更方便地管理。
不過對於小型專案來說，有時候使用預處理器也可能會太過複雜。

參考資料/延伸閱讀

1. MDN-CSS_preprocessor
2. changtsuiling.gitbooks.io